<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>知了聊天室</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/socket.io/4.1.3/socket.io.min.js"></script>
  <script src="/static/login.js"></script>
  <style>
    *{
      list-style: none;
      padding: 0;
      margin: 0;
    }
    html{
      height: 100%;
    }
    body{
      height: 100%;
      {#background-color: #aaa;#}
    }
    .main{
      width: 300px;
      margin: 0 auto;
    }
    .username-input{
      box-sizing: border-box;
      display: block;
      width: 100%;
      height: calc(1.5em + .75rem + 2px);
      padding: .375rem .75rem;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: #495057;
      background-color: #fff;
      background-clip: padding-box;
      border: 1px solid #ced4da;
      border-radius: .25rem;
      transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
      outline: none;
    }
    .submit-button{
      display: block;
      width: 100%;
      font-weight: 400;
      text-align: center;
      vertical-align: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      border: 1px solid transparent;
      padding: .375rem .75rem;
      font-size: 1rem;
      line-height: 1.5;
      border-radius: .25rem;
      transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
      color: #fff;
      background-color: #007bff;
      border-color: #007bff;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="main" style="padding-top: 100px;">
    <h1 style="text-align: center; padding-bottom: 20px;">知了即时聊天登录</h1>
    <div class="username-group">
      <input type="text" id="username-input" class="username-input" placeholder="请输入用户名">
    </div>
    <div class="button-group" style="margin-top: 20px;text-align: right">
      <button class="submit-button" id="submit-button">提交</button>
    </div>
  </div>
</body>
</html>